import React from 'react';
import { Radio, Tooltip } from 'antd';
import { genID, NodeUtils } from '../../FlowCard/util.js';
import styles from './styles.less';

const RadioMap = [
    { value: 2, label: '可编辑' },
    { value: 1, label: '只读' },
    { value: 0, label: '隐藏' }
];

const RadioStyle = {
    width: '28%',
    paddingLeft: '5%'
};

const FormAuth = ({ data = [], onChange, processConditions = [], activeData }) => {
    /** 判断是否是审批节点 */
    const isApproverNode = () => (activeData ? NodeUtils.isApproverNode(activeData) : false);

    const isStartNode = () => (activeData ? NodeUtils.isStartNode(activeData) : false);

    // 组件是否作为条件
    const isUsedCondition = (comp, rvalue) => {
        if (isStartNode()) {
            const obj = processConditions.find(item => item.formId === comp.formId);
            if (obj && obj.isUsed === true && (rvalue === 0 || rvalue === 1)) {
                return true;
            }
        } else if (isApproverNode()) {
            const obj = processConditions.find(item => item.formId === comp.formId);
            if (obj && obj.isUsed === true && rvalue === 2) {
                return true;
            }
        }
        return false;
    };

    // 同一选项的值
    const checkValue = () => {
        let v = null;
        if (data.filter(item => item.formOperate === 0).length === data.length) {
            v = 0;
        }
        if (data.filter(item => item.formOperate === 1).length === data.length) {
            v = 1;
        }
        if (data.filter(item => item.formOperate === 2).length === data.length) {
            v = 2;
        }
        return v;
    };

    return (
        data.length > 0 && (
            <div className={styles.formAuthTable}>
                <header className={styles.authTableHeader}>
                    <div className={styles.row}>
                        <div className={styles.label}>表单字段</div>

                        <Radio.Group
                            className={styles.radioGroup}
                            value={checkValue()}
                            onChange={e => {
                                if (onChange) {
                                    onChange(e.target.value);
                                }
                            }}
                        >
                            {RadioMap.map(item => (
                                <Radio key={item.value} value={item.value} style={RadioStyle}>
                                    {item.label}
                                </Radio>
                            ))}
                        </Radio.Group>
                    </div>
                </header>
                <div className={styles.authTableBody}>
                    {data.map(item => (
                        <div key={genID()} className={styles.row}>
                            <div className={styles.label}>
                                {item.required && <span className={styles.required}>*</span>}
                                <span title={item.label}>{item.label}</span>
                            </div>
                            <Radio.Group
                                key={item.formId}
                                defaultValue={item.formOperate}
                                className={styles.radioGroup}
                                onChange={e => {
                                    if (onChange) {
                                        onChange(e.target.value, item.formId);
                                    }
                                }}
                            >
                                {RadioMap.map(subItem => (
                                    <React.Fragment key={subItem.value}>
                                        {isUsedCondition(item, subItem.value) ? (
                                            <Tooltip
                                                key={subItem.value}
                                                overlayStyle={{ fontSize: 12 }}
                                                arrowPointAtCenter
                                                placement={isStartNode() ? 'left' : 'bottomLeft'}
                                                title={
                                                    isStartNode()
                                                        ? '该字段已设置为条件，在发起人节点无法设置为只读或隐藏'
                                                        : '设置为条件后审批人将不能对这个字段进行编辑'
                                                }
                                            >
                                                <Radio
                                                    key={subItem.value}
                                                    value={subItem.value}
                                                    disabled
                                                    style={RadioStyle}
                                                >
                                                    <span style={{ opacity: 0 }}> {subItem.label}</span>
                                                </Radio>
                                            </Tooltip>
                                        ) : (
                                            <Radio key={subItem.value} value={subItem.value} style={RadioStyle}>
                                                <span style={{ opacity: 0 }}> {subItem.label}</span>
                                            </Radio>
                                        )}
                                    </React.Fragment>
                                ))}
                            </Radio.Group>
                        </div>
                    ))}
                </div>
            </div>
        )
    );
};

export default FormAuth;
